import { Route, RouteProps } from 'react-router-dom'
import styles from './index.module.scss'

const KeepAlive = ({ children, ...rest }: RouteProps) => {
  return (
    <Route
      {...rest}
      // 注意：Route 组件的 children 属性和 render 属性的不同点是：
      // 它返回的内容，不管当前 Route 有没有匹配到路径，都会渲染到 DOM 树中
      children={(props) => {
        return (
          <div
            className={styles.root}
            style={{
              display: props.match ? 'block' : 'none'
            }}
          >
            {typeof children === 'function' ? children(props) : children}
          </div>
        )
      }}
    />
  )
}

export default KeepAlive
